<template>
  <div class="empty">
    <div class="box">
      <a-empty :image="emptyone" description="当前无内容" />
    </div>
    <div class="box">
      <a-empty :image="emptytwo" description="搜索无内容" />
    </div>
    <div class="box">
      <a-empty :image="emptythree" description="无法找到当前页面" />
    </div>
    <div class="box">
      <a-empty :image="emptyfour" description="网络不给力哦" />
    </div>
    <div class="box">
      <a-empty :image="emptyfive" description="加载失败" />
    </div>
    <div class="box">
      <a-empty :image="emptysix" description="暂无数据报表" />
    </div>
    <div class="box">
      <a-empty :image="emptyseven" description="暂无活动" />
    </div>
    <div class="box">
      <a-empty :image="emptyeight" description="暂无文件" />
    </div>
    <div class="box">
      <a-empty :image="emptynine" description="暂无消息" />
    </div>
    <div class="box">
      <a-empty :image="emptyten" description="暂无活动" />
    </div>
    <div class="box">
      <a-empty :image="emptyten" description="暂无数据">
        <a-button type="primary">重新加载</a-button>
      </a-empty>
    </div>
  </div>
</template>
<script setup lang="ts">
  import emptyone from '@/assets/images/emptyone.jpg';
  import emptytwo from '@/assets/images/emptytwo.jpg';
  import emptythree from '@/assets/images/emptythree.jpg';
  import emptyfour from '@/assets/images/emptyfour.jpg';
  import emptyfive from '@/assets/images/emptyfive.jpg';
  import emptysix from '@/assets/images/emptysix.jpg';
  import emptyseven from '@/assets/images/emptyseven.jpg';
  import emptyeight from '@/assets/images/emptyeight.jpg';
  import emptynine from '@/assets/images/emptynine.jpg';
  import emptyten from '@/assets/images/emptyten.jpg';
</script>
<style scoped lang="less">
  .empty {
    display: flex;
    flex-wrap: wrap;
    padding: 50px;
  }

  .box {
    width: 25%;
    margin-bottom: 50px;
  }
</style>
